<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>js冒泡与捕获</title>
    <script>
        /*
         * DOM事件流：事件捕获，处于目标事件，事件冒泡
         *
         * */
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px auto;
            cursor: move;
            position: relative;
        }
        #box2{
            width: 100px;
            height: 100px;
            background: blue;
            left: 50px;
            top:50px;
            position: relative;
        }
        #box3{
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
        }
    </style>
</head>
<body style="">
<div id="box1">1
    <div id="box2">2
        <div id="box3">3</div>
    </div>
</div>
<script src="处理浏览器的事件处理器兼容.js"></script>
<script>
    /**
     *
     * DOM事件流：
     * 1.事件捕获阶段
     * 2.处于目标阶段
     * 3.事件冒泡阶段
     任何事件的监听都遵循这三个过程
     eg:(
     <html><body><div></div></body></html>
     点击click的时候：事件流如下：document>html>body(到这里是事件捕获)>div（这是处于目标阶段）>body>html>document（到这里的是：冒泡阶段）
     )

     默认情况下，事件流是冒泡事件流，而不是捕获事件流。
     然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

     * addEventListener(event,cb(e),true/false);
     * 其中第三个参数：
     * 1.默认false(冒泡)就像石头溅起涟漪一样
     * 2true（捕获）从最外层到最内层依次触发
     *
     * touchmove
     * touchend
     * touchstart
     *
     * 想更详细的了具体过程，可以跑一跑这个DEMO
     * */

    var oDiv=document.querySelector("#box");
    var box1=document.querySelector("#box1");
    var box2=document.querySelector("#box2");
    var box3=document.querySelector("#box3");
    function add1() {
        alert(1);
    }
    box1.addEventListener('click',add1,true)
    box2.addEventListener('click',function (e) {
        alert(2)
    },false)
    box3.addEventListener('click',function (e) {
        alert(3)
    },true)
    //util.removeHandler(box1,'click',add1,true);
    console.log(box1)
</script>
</body>
</html>